<template>
  <div>
    <Slotvs :list="list">
      <!-- <template #sc="{ sr }">
        {{ sr.id }}
        <button @click="fn(sr.id)">删除</button>
      </template> -->
      <!-- <template v-slot:sc="{ sr }">
        {{ sr.id }}
        <button @click="fn(sr.id)">删除</button>
      </template> -->
      <template slot="sc" slot-scope="{ sr }">
        {{ sr.id }}
        <button @click="fd(sr)">查看</button>
        <button @click="fn(sr.id)">删除</button>
        <button @click="zj()">增加</button>
      </template>
    </Slotvs>
    <!-- 弹出窗 -->
    <SlotTeb :bu="bu" title="编辑表单">
      姓名：<input type="text" v-model="FomData.name" /><br />
      年龄： <input type="text" v-model="FomData.age" />
      <div>
        <button @click="ff(FomData)">确认</button>
        <button @click="qs">取消</button>
      </div>
    </SlotTeb>
  </div>
</template>
<script>
import Slotvs from './components/Slotvs.vue'
import SlotTeb from './components/SlotTeb.vue'
export default {
  name: '',
  components: {
    Slotvs,
    SlotTeb
  },
  data () {
    return {
      bu: false,

      FomData: {
        id: '',
        name: '',
        age: ''
      },
      list: [
        { id: 1, name: '黑马校花要桑', age: 15 },
        { id: 2, name: '黑马富少伟超', age: 28 },
        { id: 3, name: '黑马歌神帅帅', age: 18 },
        { id: 4, name: '黑马男神小徐', age: 18 }
      ]
    }
  },
  beforeCreate () {
    console.log('beforeCreate---父');
  },
  created () {
    console.log('created---父');
  },
  beforeMount () {
    console.log('beforeMount---父');

  },
  mounted () {
    console.log('mounted---父');
  },
  beforeRouteUpdate () {
    console.log('beforeRouteUpdate---父');
  },
  updated () {
    console.log('updated---父');
  },
  beforeDestroy () {
    console.log('beforeDestroy---父');
  },
  destroyed () {
    console.log('destroyed---父');
  },
  computed: {
  },
  methods: {
    fn (e) {
      this.list = this.list.filter(item => item.id != e)
    },
    fd (e) {
      this.bu = true
      this.FomData = JSON.parse(JSON.stringify(e))
    },
    qs () {
      // this.$emit('update:bu', false)
      this.bu = false
    },
    ff () {
      let aa = this.list.find(item => item.id == this.FomData.id)
      aa.name = this.FomData.name
      aa.age = this.FomData.age
      this.bu = false

    },
    zj () {
      this.bu = true

    }
  },
}
</script>
<style lang='less'  scoped>
</style>
